<template>
  <el-row class="bgf">
    <el-col :span="12" :offset="5">
      <el-form label-width="100px" :model="forminfo" :rules="rules" ref="forminfo">
        <el-form-item label="轮播图名称" prop="title">
          <el-input v-model="forminfo.title"></el-input>
        </el-form-item>
        <el-form-item label="轮播图图片" prop="img">
          <!-- 上传组件 -->
          <!-- action 属性： 上传地址！ 如果写了地址，那么选择图片之后就会自动上传！  -->
          <!-- list-type属性： 上传控件的类型 -->
          <!-- file-list属性： 文件列表  [{name:'',url:""}] -->
          <!-- limit属性：上传最大个数 -->
          <!-- on-change: 图片变了的时候 -->
          <!-- name属性： 上传的对应字段 -->
          <!-- auto-upload:是否自动上传 -->
          <el-upload 
            action="#" 
            list-type="picture-card" 
            :on-preview="handlePictureCardPreview" 
            :file-list="fileList"  
            :limit="1" 
            :on-change="fileChange" 
            :auto-upload="false"
            :on-exceed="limitImg"
            >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
          <!-- 弹框 -->
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio v-model="forminfo.status" :label="1">正常</el-radio>
          <el-radio v-model="forminfo.status" :label="0">禁用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="!$route.params.id" @click="submit">立即添加</el-button>
          <el-button type="success" v-else @click="submit">立即修改</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
// 如何区分是添加还是修改页面！
// 根据路由是否传入的 动态参数！  this.$route.params.id  修改！
import { editBanner, addBanner, getBanner } from "@/request/banner";
let defaultInfo = {}; // 修改的时候的重置！
export default {
  data() {
    return {
      forminfo: {
        title: "", // 标题
        img: "", // 图片
        status: 1 // 状态
      },
      rules: {
        // 表单的验证规则
        title: [
          { required: true, message: "分类名称必须写", trigger: "blur" }
        ]
      },
      dialogVisible:false,  // 弹框
      dialogImageUrl:"",  // 弹框图片地址
      fileList:[]   // 上传文件列表
    };
  },
  created() {
    if (this.$route.params.id) {
      // 获取修改的这一条的数据，赋给表单！
      this.getinfo(this.$route.params.id);
    }
  },
  methods: {
    async getinfo(id) {
      // 获取修改数据，赋给表单！
      this.forminfo = await getBanner(id);
      // 回显图片
      let url= this.forminfo.img ? this.$HOST+this.forminfo.img :""
      if(url){
         this.fileList.push({ name:this.forminfo.catename,url})
      }
      // 赋给一个临时变量，用于重置的时候再次赋值！
      defaultInfo = { ...this.forminfo };
    },
    submit() {
      // 提交数据 【添加、修改】
      this.$refs.forminfo.validate(async isok => {
        if (isok) {
          // 发送请求！
          // 使用FormData提交数据！
          let formdata = new FormData();
          for(let k in this.forminfo){
            formdata.append(k,this.forminfo[k])
          }  
          let res;
          if (this.$route.params.id) {
                formdata.append('id',this.$route.params.id); // 给表单数据添加上id
                res = await editBanner(formdata); // 修改请求
          } else {
              // 提交的是formdata实例对象
              res = await addBanner(formdata); // 添加请求
          }
          if (res) {
            this.$router.back();
          }
        } else {
          this.$message.warn("验证不通过");
        }
      });
    },
    reset() {
      // 重置
      // resetFields表单重置！
      if (this.$route.params.id) {
          this.fileList = [];
        this.getinfo(this.$route.params.id);
      } else {
        // 添加重置
        this.$refs.forminfo.resetFields();
        this.fileList =[];
      }
    },
    // 上传空间的相关事件
    handlePictureCardPreview(file) {  // 预览事件
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    },
    fileChange(file){  // 文件改变时候触发
        // file.raw 才是原生的文件信息！
        this.forminfo.img =file.raw;
    },
    limitImg(){
       this.$message.warning("分类图片最多添加1个")
    }
  },
  components: {}
};

// 图片上传：
// 两种思路：
// 1、先上传图片，然后接口返回上传好的图片地址， 将地址赋给变量字段连通表单其他数据一起提交！
// 2、图片数据和表单字段信息所有的数据一起提交 （ ！！！注意： 使用FormData对象进行提交！ ）
// let formdata =  new FormData();
// formdata.append('字段名',数据)
// 发送ajax , 提交的数据就是这个formdata
</script>
<style scoped>
</style>